<template>
  <div>
    <header>
      <h1>
        MBTI性格测试
      </h1>
    </header>

    <div class="timu_kuang">
      <div>当前是第{{examNumber+1}}题</div>
      <div class="timu_neirong">
        <el-form label-width="75px">
          你会
        </el-form>
      </div>

      <div class="xuanxiang">
        <el-form label-width="75px">
          <el-form-item>
            <el-button @click="A" class="a-btn" type="primary" text-align="center">A</el-button>
            <el-button @click="B" class="b-btn" type="primary" text-align="center">B</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>


    <div class="anniu" id="app">
      <el-form label-width="75px">
        <el-form-item>
          <el-button @click="toBack" class="shang-btn" type="primary" text-align="center">上一题</el-button>
          <el-button @click="toNext" class="xia-btn" type="primary" text-align="center">下一题</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
// @ is an alias to /src

//import { reactive } from "vue";
import router from "../router/index";
export default {
  name: "Home",
  setup() {
    console.log(router.options.routes)
    let tabList = router.options.routes[0].children;   /*接收数值*/

    return {
      tabList,
    };
  },
};


</script>

<style lang="scss" scoped>
header{
  height: 1rem;
  width: 100%;
  h1{
    font-size: 3rem;
    color: aliceblue;
    text-align: center;
    line-height: 4rem;
  }
}

.timu_kuang{
  width:700px;
  height: 450px;
  margin-top: 90px;
  margin-bottom: 30px;
  margin-left: 420px;
  margin-right: 90px;
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  border-radius:20px;   /*设置边框圆度*/
  padding:15px;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 7px 7px 17px rgba(12, 5, 5, 0.7);   /*阴影*/
}

.timu_neirong{
  width:600px;
  height: 100px;
  margin-top: 80px;
  margin-bottom: 30px;
  margin-left: 35px;
  margin-right: 20px;
  border-radius:20px;   /*设置边框圆度*/
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}
.xuxiang{
  width:400px;
  height: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
.a-btn{
  width:500px;
  height: 50px;
  margin-top: 30px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 0px;
  border-radius:20px;   /*设置边框圆度*/
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}
.b-btn{
  width:500px;
  height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 0px;
  margin-right: 50px;
  border-radius:20px;   /*设置边框圆度*/
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}

.anniu{
  width:650px;
  height: 80px;
  margin-left: 440px;
  margin-bottom:50px;
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  border-radius:20px;   /*设置边框圆度*/
  padding:15px;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 7px 7px 17px rgba(12, 5, 5, 0.7);   /*阴影*/
}

.shang-btn{
  width:215px;
  height: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 5px;
  margin-right: 15px;
  border-radius:20px;   /*设置边框圆度*/
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}
.shang-btn:hover{    /*鼠标悬停在按钮上的样式*/
  background-color: #4CAF50; /* Green */
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);  /*阴影*/
}
.xia-btn{
  width:215px;
  height: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius:20px;   /*设置边框圆度*/
  border:2px solid rgba(131, 82, 3, 0.13);   /*边框*/
  background-color: rgba(9, 0, 0, 0.3);
}

</style>
